<template>
  <div class="main-tab-bar" :class="{blackbg:isChoose === 0}">
    <nav-bar  v-show="$store.state.mainShow">
      <div slot="left" class="left">
        <img src="../../../assets/img/find/navbar/menu.svg" alt=""
        @click="showmenu">
      </div>
      <div slot="center" class="center">
        <div class="center-item" v-for="(item,index) in navbar_center" :key="item" @click="itemClick(index)"
          :class="{chooseItem:index === newindex, profile:isChoose === 0}">{{item}}</div>
      </div>
      <div slot="right" class="right">
        <img src="../../../assets/img/find/navbar/search.svg" alt="" @click="search">
      </div>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from "../../common/navbar/NavBar";
    export default {
        name: "MainTabBar",
        components:{
            NavBar,
        },
        props:{
          newindex:{
              type:Number,
              default(){
                  return 0
              }
          }
        },
        data(){
            return{
                navbar_center: ["我的", "发现", "云村", "视频"],
                path:['/profile','/find','/cloud_village','/video'],
                isChoose: 1,
            }
        },
        methods:{
            itemClick(index){
               if(index == 2){
                   this.$toast.show('抱歉，该功能暂未开通')
               }else{
                   this.isChoose = index
                   this.$router.push(this.path[index])
               }
            },
            search(){
              this.$router.push('search')
            },
            showmenu(){
                this.$store.commit('showMenu')
            },
        },
    }
</script>

<style scoped>
  .blackbg{
    /*background-color: #1E1E24;*/
  }

  .main-tab-bar{
    position: fixed;
    top: 0;
    z-index: 9;
    background-color: white;
    width: 100%;
    margin: 0 auto;
  }

  .left{

  }

  .left img{
    width: 16px;
    height: 16px;
  }

  .center{
    display: flex;
    font-size: 12px;
    padding: 0 20px;
  }

  .center-item{
    flex: 1;
  }

  .right{

  }

  .right img{
    width: 16px;
    height: 16px;
  }

  .chooseItem{
    font-size: 15px;
    color: black;
  }

  .profile{
    color: black;
  }
</style>